<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Posts &laquo; Admin</title>
  <link rel="stylesheet" href="../static/assets/vendors/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="../static/assets/vendors/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="../static/assets/vendors/nprogress/nprogress.css">
  <link rel="stylesheet" href="../static/assets/css/admin.css">
  <script src="../static/assets/vendors/nprogress/nprogress.js"></script>
</head>
<body>
  <script>NProgress.start()</script>

  <div class="main">
    <?php require_once 'public/_navbar.php'  ?>
    <div class="container-fluid">
      <div class="page-title">
        <h1>所有文章</h1>
        <a href="post-add.php" class="btn btn-primary btn-xs">写文章</a>
      </div>
      <!-- 有错误信息时展示 -->
      <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
      <div class="page-action">
        <!-- show when multiple checked -->
        <a class="btn btn-danger btn-sm" href="javascript:;" style="display: none">批量删除</a>
        <form class="form-inline">
          <select id="category" name="" class="form-control input-sm">
            <option value="all">所有分类</option>
             <!-- 把所有分类 追加到这来 -->
          </select>
          <select id="status" name="" class="form-control input-sm">
            <option value="all">所有状态</option>
            <option value="drafted">草稿</option>
            <option value="published">已发布</option>
            <option value="trashed">已删除</option>
          </select>
          <!-- $("#status").val() select的val值 就是 你选择到的那个option对应的value值 -->
          <button id="btn-filt" type="button" class="btn btn-default btn-sm">筛选</button>
        </form>
        <ul class="pagination pagination-sm pull-right">
             <!-- 生成格子来 填上 -->
        </ul>
      </div>
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th class="text-center" width="40"><input type="checkbox"></th>
            <th>标题</th>
            <th>作者</th>
            <th>分类</th>
            <th class="text-center">发表时间</th>
            <th class="text-center">状态</th>
            <th class="text-center" width="100">操作</th>
          </tr>
        </thead>
        <tbody>
            <!-- 坑 -->
        </tbody>
      </table>
    </div>
  </div>

  
  <?php require_once 'public/_aside.php'  ?>

  <script src="../static/assets/vendors/jquery/jquery.min.js"></script>
  <script src="../static/assets/vendors/bootstrap/js/bootstrap.js"></script>
  <script>NProgress.done()</script>
  <script>

    
    // 页面一打开 就应该 发送ajax拿到所有文章的数据
    $(function(){
      var currentPage=1;//当前页
      var pageCount=4;//最大的页 一会计算出来
      var pageSize=10;//每页显示10条
      //生成页码按钮
      makePageButton();
      function makePageButton(){
         // 生成5个li标签的格子  有上一页 和下一页      
        var start=currentPage-2; // 开始的
        if(start<1){ // 判断如果start小于1  就应该从1开始 因为没有0 -1 -2这些
          start=1;
        }
        //结束
        var end=start+4;// 视频里面用的currentPage 但是这里应该用start
        if(end>pageCount){  // 如果已经是最后一页了 那么只能是最后一页
          end=pageCount;//如果已经是最后一页了就强制到最后一页就结束了
        }
        var html="";
        if(currentPage!=1){ // 如果是第一页 那么就不该拼接显示 上一页按钮  不是第一页 就应该拼接
          html+=`<li class="item" data-page="${currentPage-1}"><a href="javascript:;">上一页</a></li>`;
        }
        for(var i=start;i<=end;i++){//循环一次生成一个li格子
          if(i==currentPage){ //如果是当前页 加上active类名 颜色变蓝色  
            html+=`<li class="item active" data-page="${i}"><a href="javascript:;" >${i}</a></li>`;
          }else{
            html+=`<li class="item"  data-page="${i}"><a href="javascript:;">${i}</a></li>`;
          }
        }
        if(currentPage!=pageCount){ // 如果是最后一页了 不拼接 下一页  如果不是 就拼接
          html+=`<li  class="item" data-page="${currentPage+1}"><a href="javascript:;">下一页</a></li>`;
        }
        $(".pagination").html(html); // 追加到页面的 ul上
      }
      // 状态（drafted-草稿/published-已发布/trashed-已作废）
      var statusData={
        drafted:"草稿", 
        published:"已发布", 
        trashed:"已作废"
      };
      $.ajax({// 页面一打开 就应该 发送ajax拿到所有文章的数据
        type:"post",
        url:"api/_getPostsData.php",
        data:{currentPage:1,pageSize:10,status:"published",categoryId:"all"},
        success:function(res){
          // 动态循环渲染出 每一篇文章的 tr追加到tbody上
          if(res.code==1){
            var str='';
            var data=res.data;
            $.each(data,function(i,e){//e就是每一项值
                str+=`<tr>
                          <td class="text-center"><input type="checkbox"></td>
                          <td>${e.title}</td>
                          <td>${e.nickname}</td>
                          <td>${e.name}</td>
                          <td class="text-center">${e.created}</td>
                          <td class="text-center">${statusData[e.status]}</td>
                          <td class="text-center">
                            <a href="javascript:;" class="btn btn-default btn-xs">编辑</a>
                            <a href="javascript:;" class="btn btn-danger btn-xs">删除</a>
                          </td>
                      </tr>`

            })
            // 循环完了  渲染到tbody
            $("tbody").html(str);
          }
        }
      })

      // 给ul 分页li绑定点击事件
      $(".pagination").on("click",".item",function(){
        // 获取你点击的这个按钮 页码
        currentPage=parseInt($(this).attr("data-page"));
        // alert(currentPage)
        // 发送ajax' 获取当前这页的数据 渲染到页面上
        $.ajax({
          type:"post",
          url:"api/_getPostsData.php",
          data:{
            currentPage:currentPage,
            pageSize:pageSize
          },
          success:function(res){
            // 把当前的数据循环渲染到页面上
            if(res.code==1){
              // 点击之后 重新执行 生成新的按钮
              makePageButton();
              var str='';
              var data=res.data;
              // $("tbody").empty();
              $.each(data,function(i,e){//e就是每一项值
                  str+=`<tr>
                            <td class="text-center"><input type="checkbox"></td>
                            <td>${e.title}</td>
                            <td>${e.nickname}</td>
                            <td>${e.name}</td>
                            <td class="text-center">${e.created}</td>
                            <td class="text-center">${statusData[e.status]}</td>
                            <td class="text-center">
                              <a href="javascript:;" class="btn btn-default btn-xs">编辑</a>
                              <a href="javascript:;" class="btn btn-danger btn-xs">删除</a>
                            </td>
                        </tr>`

              })
              // 循环完了  渲染到tbody
              $("tbody").html(str);


            }
          }
        })
      })

      // 筛选
      // 页面一打开就要 把所有分类写在select里面
      $.ajax({
        type:"post",
        url:"api/_getCategoryData.php",
        success:function(res){
          // 动态 循环数组 生成很多option 填到select里面
          if(res.code==1){
            var data=res.data;
            $.each(data,function(i,e){
              var str=`<option value="${e.id}">${e.name}</option>`;
              $(str).appendTo('#category');
            })
          }
        }
      })
      
      // 点击 筛选按钮 把对应的 文章筛选 出来 显示到页面
      $("#btn-filt").on("click",function(){
        // 获取你 是草稿还是已发布 还是已删除 把他给后台 后台才能给你对应的文章
        var status=$("#status").val();// alert(status)
        var categoryId=$("#category").val();//分类
        $.ajax({
          type:"post",
          url:"api/_getPostsData.php",
          data:{
            currentPage:currentPage,
            pageSize:pageSize,
            status:status,
            categoryId:categoryId
          },
          success:function(res){
            // 对应的数组 循环到页面上
            if(res.code==1){
              makePageButton();// 点击之后 重新执行 生成新的按钮
              var str='';
              var data=res.data;
              // 循环生成文章tr 渲染到页面上
              $.each(data,function(i,e){//e就是每一项值
                  str+=`<tr>
                            <td class="text-center"><input type="checkbox"></td>
                            <td>${e.title}</td>
                            <td>${e.nickname}</td>
                            <td>${e.name}</td>
                            <td class="text-center">${e.created}</td>
                            <td class="text-center">${statusData[e.status]}</td>
                            <td class="text-center">
                              <a href="javascript:;" class="btn btn-default btn-xs">编辑</a>
                              <a href="javascript:;" class="btn btn-danger btn-xs">删除</a>
                            </td>
                        </tr>`

              })
              // 循环完了  渲染到tbody
              $("tbody").html(str);
            }
          }
        })

      })


    })
  
  
  </script>
</body>
</html>
